/**
 * @author dhc
 * @modified 2020/04/20
 * summernote库的适配css(使用summernote的文本编辑器页面专用)
 * 需要放在一个.note-relative的容器中
 * ----------
 * 此段代码还带有一个标题的样式(.title-editor),
 * 以及表单的样式(.editor-form)
 */

.content {
	overflow: hidden;
}

form.editor-form {
	height: 100%;
	display: flex;
	flex-direction: column;
}

input.title-editor {
	font-size: 6vw;
	width: 100vw;
	padding: 5vw 5vw 0;
	font-weight: bold;
	background-color: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
}

input.title-editor:focus {
	border: none!important;
	box-shadow: none!important;
}

input.title-editor::-webkit-input-placeholder {
	color: var(--color-gray-medium);
	font-weight: bold;
}

.note-relative {
	position: relative;
	max-height: 100%;
	flex: auto;
}

.note-editor {
	--top: 40;
	display: block;
	border: 0 !important;
	width: 100%;
	height: 100%;
	bottom: 0;
	transition: height 0.2s ease-out;
}

.note-relative .note-editor {
	position: absolute;
}

.note-editor.show {
	height: calc(100% - var(--top) * 1px);
}

.note-editor,
.note-editor * {
	font-size: 14px;
	line-height: unset;
	/* 配合编辑器, 这里只能用px指定 */
}

.note-editor * {
	margin: 0;
}

.note-editor ul,
.note-editor ol {
	padding-left: 20px;
}

.note-editor pre {
	padding-left: 4px;
	margin-top: -1px;
	border-left: 8px solid var(--color-gray-medium);
	color: var(--color-white);
	background-color: var(--color-gray-dark);
}

.note-editor h1 {
	font-size: 28px;
}

.note-editor h2 {
	font-size: 26px;
}

.note-editor h3 {
	font-size: 24px;
}

.note-editor h4 {
	font-size: 22px;
}

.note-editor h5 {
	font-size: 20px;
}

.note-editor h6 {
	font-size: 18px;
}

.note-editing-area,
.note-editable {
	user-select: unset;
}

.note-editing-area {
	padding: 0 2.5vw;
	height: 100%;
	overflow: auto !important;
}

.note-toolbar {
	position: absolute;
	margin-top: 0px;
	top: calc(var(--top) * -1px);
	left: 0;
	right: 0;
	border: 0;
	display: none;
	border-top: 1px solid var(--color-gray-light);
	background-color: transparent;
	z-index: 10;
}

.note-toolbar.show {
	display: block;
}

.note-toolbar>div {
	display: flex;
}

.note-toolbar>div>button {
	flex: auto;
}

.note-editor .note-statusbar {
	display: none;
}
